<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Census</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/census.style.css"/>
</head>
<body>
<header class="am-text-center">
    <div class="header-desc">
        <h1>Census</h1>
        <p>统计页面，包括数据统计、进度显示等</p>
    </div>
</header>

<section class="am-container">
    <h2 class="am-text-center">数据统计</h2>
    <table class="am-table">
        <thead>
        <tr>
            <th>统计名称</th>
            <th>数据</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>xxxxx</td>
            <td>123</td>
            <td>2012-10-01</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>234</td>
            <td>2012-10-01</td>
        </tr>
        <tr class="am-active">
            <td>xxxxxx</td>
            <td>345</td>
            <td>2012-10-01</td>
        </tr>
        <tr>
            <td>xx</td>
            <td>12</td>
            <td>2012-10-01</td>
        </tr>
        <tr>
            <td>xxxx</td>
            <td>124</td>
            <td>2012-10-01</td>
        </tr>
        </tbody>
    </table>
</section>

<section class="am-container">
    <h2 class="am-text-center">进度显示</h2>
    <!-- 存放不同的进度组在不同的div里面 -->
    <div>
        <h3>正在进行：Amaze UI开发大赛</h3>
        <div class="am-progress am-progress-striped am-progress-sm am-active ">
            <div class="am-progress-bar am-progress-bar-secondary"  style="width: 57%"></div>
        </div>
    </div>

    <div>
        <h3>学习进度</h3>
        <h6>c</h6>
        <div class="am-progress">
            <div class="am-progress-bar" style="width: 25%">25%</div>
        </div>
        <h6>数据结构</h6>
        <div class="am-progress">
            <div class="am-progress-bar" style="width: 20%">20%</div>
        </div>
        <h6>CSS</h6>
        <div class="am-progress">
            <div class="am-progress-bar" style="width: 80%">80%</div>
        </div>
        <h6>JS</h6>
        <div class="am-progress">
            <div class="am-progress-bar" style="width: 60%">60%</div>
        </div>
        <h6>大学物理</h6>
        <div class="am-progress">
            <div class="am-progress-bar" style="width: 7%">7%</div>
        </div>
    </div>
</section>


<footer>
    <p>census page template<br/>
        <small>© Copyright XXX. Designed by Misic.</small>
    </p>
</footer>



<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>

<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
</body>
</html>